<template>
    <view>
        <view class="search-box block">
            <icon class="search-icon" type="search" size="14" color="#b2b2b2" />
            <input class="search-input" confirm-type="search" placeholder="搜索" @input="searchInput" v-model="searchText" />
        </view>
        <view class="tab-radius">
            <tab-radius :list="['离到期30天内', '已过期7天内']" :active="payIndex" @change="onPayTab" />
        </view>
        <view class="record">
            <!--  -->
            <view>
                共有{{ payIndex === 0 ? completeCount : expireCount }}条记录
            </view>
            <!-- <view class="record-box">
            <view>排序</view>
                <image class="sort-img" src="../../static/home/sort.png"/>
            </view> -->
        </view>
        <view v-if="payIndex === 0" class="record-list">
            <no-data v-if="completeList.length === 0" />
            <reminderHtml type="insurance" isash="1" :isexpire="0" v-for="(item,  index) in completeList" :key="index"

                :item="item" @detail="onGoDetail"  />
        </view>
        <view v-if="payIndex === 1" class="record-list">
            <no-data v-if="expireList.length === 0" />
            <reminderHtml type="insurance" isash="0" :isexpire="1" v-for="(item,  index) in expireList" :key="index"

                :item="item" @detail="onGoDetail"  />
        </view>
    </view>
</template>
<script setup lang="ts">
import { onReachBottom } from "@dcloudio/uni-app"
import { ref, onMounted, onBeforeUnmount } from "vue"
import user from "@/utils/user"
import tabRadius from "@/components/tab-radius/tab-radius.vue"
import reminderHtml from "@/components/reminder-html/index.vue"
import {
    getPayComplete,
    getPayExpire,
    GetPayCompleteDto
} from "@/api/reminder"
import noData from "@/components/no-data/no-data.vue"
const props = defineProps(["tabIndex"])
const searchText = ref("")
const completeNextPage = ref(true)
const completeList = ref([] as GetPayCompleteDto[])
const completePageNum = ref(1)
const expireNextPage = ref(true)
const expireList = ref([] as GetPayCompleteDto[])
const expirePageNum = ref(1)
const payIndex = ref(0)
const completeCount = ref(0)
const expireCount = ref(0)
const loadingflag = ref(false)
onMounted(() => {
    loadingflag.value = true
})
onBeforeUnmount(() => {
    loadingflag.value = false
})
// 到达底部
onReachBottom(() => {
    if (payIndex.value === 0 && props.tabIndex === 1) {
        if (!completeNextPage.value) {
            return
        }
        completePageNum.value += 1
        getPayCompleteList()
        console.log("触发啦")
    } else if (payIndex.value === 1 && props.tabIndex === 1) {
        if (!expireNextPage.value) {
            return
        }
        expirePageNum.value += 1
        getPayExpireList()
    }
})
const searchInput = () => {
    if (payIndex.value === 0) {
        completeList.value = []
        completePageNum.value = 1
        completeNextPage.value = true
        getPayCompleteList()
    } else {
        expireList.value = []
        expirePageNum.value = 1
        expireNextPage.value = true
        getPayExpireList()
    }
    console.log(searchText.value, "searchText")
}
const onGoDetail = (event: { id: number; dealId: number }) => {
    uni.navigateTo({
        url:
            "/packageRemind/pages/pay-detail/index?id=" +
            event.id +
            "&dealId=" +
            event.dealId
    })
}
const onPayTab = (index: number) => {
    payIndex.value = index
    console.log(payIndex.value, "payIndex")
}
const getPayCompleteList = async () => {
    const result = await getPayComplete({
        searchText: searchText.value,
        pageNum: completePageNum.value,
        pageSize: 50
    })
    if (!result.hasNextPage) {
        completeNextPage.value = false
    }
    result.list = result.list.map((item) => {
        return {
            ...item,
            insuranceType: 0
        }
    })
    const arr = []
    arr.push(...completeList.value)
    arr.push(...result.list)
    completeList.value = arr
    completeCount.value = result.totalCount
    console.log(completeList.value, "completeList")
}
const getPayExpireList = async () => {
    const result = await getPayExpire({
        searchText: searchText.value,
        pageNum: expirePageNum.value,
        pageSize: 50
    })
    if (!result.hasNextPage) {
        expireNextPage.value = false
    }
    result.list = result.list.map((item) => {
        return {
            ...item,
            insuranceType: 0
        }
    })
    const arr = []
    arr.push(...expireList.value)
    arr.push(...result.list)
    expireList.value = arr
    expireCount.value = result.totalCount
}
onMounted(async () => {
    await user.waitLogin()
    getPayCompleteList()
    getPayExpireList()
})
</script>
<style lang="scss" scoped>
.record-list  {
    padding: 0 30rpx;
    margin-top: 34rpx;
}

.record {
    padding: 0 30rpx;
    @include flex-between;
    color: $grey;
    font-size: $font-normal;
    margin-top: 30rpx;
}

.tab-radius {
    padding: 0rpx 30rpx;
}
</style>
